<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本用法</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        function f1(){
            console.log("这是jquery中使用静态绑定实现的方式")
        }
        // window.onload = function(){
        //     document.getElementById("btn").onclick = function(){
        //         console.log("这是JavaScript中动态绑定实现的方式")
        //     };
        // }
        // 在JQuery中,调用JQuery函数的对象必须是JQuery对象
        // 在js中,调用js函数的对象必须是DOM对象
        // 某些时候,我们需要混用
        // 即:需要对JQuery对象与DOM对象实现互相转换
        // DOM对象-->JQuery对象:$(DOM对象)

        // jquery中提供了一个ready方法,调用者为当前文档
        // 因此,通过js提供的document对象转换成对应的jquery对象进行调用
        // $(document).ready(function(){
        //     console.log("这是jquery中页面加载事件");
        //     // 在jquery中,提供了查询节点的方式
        //     // 语法:$("选择器"),选择器的规则与CSS基本一致
        //     // $("#btn") 相当于document.getElementById("btn")
        //     // jquery中所有事件与js完全一致
        //     // 使用时存在一些区别
        //     // 语法:jquery对象.事件()
        //         // 表示对jquery对象执行一个操作
        //         // 例如:$(xxx).click():表示点击$(xxx)元素
        //     // jquery对象.事件(fn)
        //         // 当触发了对应事件之后,怎么处理
        //         // 处理过程交给参数fn
        //     $("#btn").click(function(){
        //         console.log("这是jquery中动态绑定事件的方式");
        //     })
        // })

        // 最终简化版
        $(function(){
            $("#btn").click(function(){
                console.log("这是jquery中动态绑定事件的方式");
                // document.getElementById("btn").innerHTML = "DOM对象方法";
                // 可以将jquery对象转换成DOM对象
                // 1.jquery对象[0]
                // 2.jquery对象.get(0)
                // $("#btn")[0].innerHTML = "DOM对象方法";
                // $("#btn").get(0).innerHTML = "DOM对象方法";
                // $("#btn").html("jquery对象方法");
                // this是DOM对象
                // $(this).html("jquery对象方法");
                this.innerHTML = "DOM对象方法";
            });
        })
    </script>
</head>
<body>
<button onclick="f1()">静态绑定</button><br>
<button id="btn">动态绑定</button><br>
</body>
</html>